<template>
    <!--顶部搜索按钮区域-->
    <search-top-bar />
    <view class="content">
		<div v-if="!displayInvitePage">
			<div class="user-info-box" v-if="member">
			    <div class="up-box">
			        <div class="user-header-box">
			            <image
			                class="img"
			                src="/static/images/main-2.jpg"
			                mode="widthFix"
			                fade-show
			                lazy-load
			            />
			        </div>
			        <div class="info">
			            <div class="line"></div>
			            <div class="name">{{userInfo.name||''}}</div>
			            <div class="e-name">{{userInfo.flowerName||''}}</div>
			        </div>
			    </div>
			    <div class="down-box">
			        <div class="left-box">
			            <div class="title">{{userInfo.position||''}}</div>
			            <div class="e-title">{{userInfo.positionEn||''}}</div>
			        </div>
			        <div class="right-box">
			            <div class="up-area">
			                <div class="left-name" @click="goNext('作品集')">
			                    <div>作品集</div>
			                    <div class="e-min">Portfolio</div>
			                </div>
			                <div class="dot-box">
			                    <image
			                        class="img"
			                        src="/static/images/white-dot.png"
			                        mode="scaleToFill"
			                        fade-show
			                        lazy-load
			                    />
			                </div>
			            </div>
			            <div class="down-area">
			                <div>贡献值</div>
			                <div class="spe">{{userInfo.contribution||''}}</div>
			            </div>
			        </div>
			    </div>
			    <div class="area-desc">{{userInfo.company||''}}</div>
			</div>
			<div v-else>
				<!--游客显示页面-->
				<div class="info-box-out-wrapper">
					<div class="info-box">
						<image
						    class="img"
						    src="/static/images/dou-hao.png"
						    mode="widthFix"
						    fade-show
						    lazy-load
						/>
						<div class="avatar-and-nick-box">		 
							<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							  <image class="avatar" mode="aspectFit" :src="avatar"></image>
							</button>
						</div> 
						<!--昵称-->
						<div class="nick-name-box">
							<div>
								<!-- <uv-input inputAlign="left" maxlength="10" type="nickname" placeholder="" :focus="focusStatus" :readonly="!editStatus" border="none" v-model="nickname" @blur="onBlur">
							    </uv-input> -->
								<input class="uni-input" maxlength="10" type="nickname" :focus="focusStatus" :readonly="!editStatus" placeholder="" v-model="nickname" @blur="onBlur"/>
							</div> 
							<div v-if="editStatus" @click="onBlur" class="sure-btn">确定</div>
							<div v-else class="edit-pen"><uv-icon name="edit-pen" @click="editNickName"></uv-icon></div>
						</div>
						<!--文案-->
						<div class="desc-text-box">
							<div class="bold-text">设计是一种文华的载体，鼓励我们探索未知，勇于创新。让生活变得更加有趣、富有情感和意义......</div>
							<div class="en-text">
								Design is a carrier of culture,encourages us to explore the unknown and be brave in innovation. Make life more interesting, emotional, and meaningful......
							</div>
						</div>
					</div>
				</div>
			 
				<div class="zhuan-ye-img-box">
					<div
					   class="zhuan-ye-img"
					   @click="joinUs('member')"  
					>
					    <div class="c-text">成为会员</div>
					    <div class="spe">Become a member</div>
					</div>
				</div>
			</div>
		</div>
        <div v-if="displayInvitePage" class="invite-box">
            <div class="invite-top-area">
                <image
                    class="img"
                    src="/static/images/invite-bg.jpg"
                    mode="widthFix"
                    fade-show
                    lazy-load
                />
                <div class="invite-title-box">
                    <div class="invite-title">
                        <div class="title-one">
                            共创<span class="spe"></span>共生<span
                                class="spe"
                            ></span
                            >共荣
                        </div>
                        <div class="title-two">诚挚邀请</div>
                    </div>
                </div>
            </div>
            <div class="text-box">
                <div class="text">
                    亲爱的朋友们：<br />
                    <div class="text-p">
                        在这个充满无限创意和无限可能的时代，每一位设计师都值得拥有一个展示自我、实现价值的舞台，才华值得被更广泛的关注和认可。我们诚挚邀请您加入我们的设计师平台，一起开启美好设计师共享家园！成为我们的会员，意味着加入一个温暖而充满活力的设计大家庭。在这里可以结伴前行，共同成长。
                    </div>
                    <div class="text-p">
                        作为一个不断成长的设计师平台，我们深知，前进的道路离不开更多朋友的支持与鼓励。我们渴望汇聚更多朋友们一起加入我们关心和见证我们的成长。
                    </div>
                    <div class="text-p">
                        真诚地期待您的加入！让我们一起我们携手用创意点亮世界！
                    </div>
                </div>
            </div>
            <div class="join-us">
                <image
                    @click="joinUs"
                    class="img join-btn"
                    mode="scaleToFill"
                    src="/static/images/join-us-btn.png"
                ></image>
            </div>
        </div>
    </view>
</template>
<script setup>
import useShare from "@/utils/composables/useShare";
import searchTopBar from "@/pages/index/components/searchTopBar.vue";
import {updateNameApi,updateAvatarApi} from "@/api/index.js";
import { storeToRefs } from "pinia";
import { useUserStore, useSystemStore } from "@/stores";
const userStore = useUserStore();
const { userId,member,userInfo } = storeToRefs(userStore);
const { systemInfo } = storeToRefs(useSystemStore());
const displayInvitePage = ref(false);
const avatar=ref('');
const editStatus=ref(false);
const focusStatus=ref(false);
const nickname=ref('');
const editNickName=()=>{
	editStatus.value=true;
	focusStatus.value=true;
}//点击编辑
const onBlur=(value)=>{
	console.log('e---',nickname.value,'----value----',value);
	setTimeout(()=>{
		console.log('eeeeee---',nickname.value);
		updateNameApi({name:nickname.value?.trim()}).then(res=>{
			uni.showToast({
				title:'更新成功'
			})
			editStatus.value=false;
			focusStatus.value=false;
			userStore.userInfo=Object.assign(userInfo.value,{name:nickname.value?.trim()});
		})
	},1000)
	 
};//更新昵称
const onChooseAvatar=(e)=>{
	console.log(e,'-----获取到头像----e');
	const { avatarUrl } = e.detail;
	updateAvatarApi(avatarUrl).then(res=>{
		 console.log('url---url---url--',res);
		 avatar.value=res.url;
		 console.log('res----445555',avatar.value);
		 userStore.userInfo=Object.assign(userInfo.value,{avatar:res.url});
		 uni.showToast({
		 	title:'更新成功'
		 })
	}).catch(err=>{
		uni.showToast({
			title:'上传失败',
			icon:'none'
		})
	})	 
}
const joinUs = (label) => {
    //console.log("66666");
	if(label=='member'){
		//成为会员
		uni.navigateTo({
		    url: "/pages/subPackageA/joinPage/index",
		});
	}else{
		uni.navigateTo({
		    url: "/pages/subPackageA/login/index",
		});
	} 
}; //加入我们
const goNext = (label) => {
    switch (label) {
        case "作品集":
            uni.navigateTo({
                url: "../subPackageA/pictureCards/index?type=M1",
            });
            break;
        default:
            break;
    }
};
onShow(() => {
    //检查登录态、
	console.log("onShow----",userId.value);
	avatar.value=userInfo.value.avatar;
	nickname.value=userInfo.value.name;
	editStatus.value=false;
	focusStatus.value=false;
    displayInvitePage.value = userId.value ? false : true;  
});
onLoad((options) => {
	avatar.value=userInfo.value.avatar;
	nickname.value=userInfo.value.name;
	displayInvitePage.value = userId.value ? false : true;
});
const {onShareAppMessage,onShareTimeline}=useShare() 
</script>
<style>
page {
    height: 100%;
    background: #d6d6d6;
}
</style>
<style lang="scss" scoped>
	.zhuan-ye-img-box{
		position: fixed;
		bottom:0;
		right:0;
		display:flex;
		justify-content: flex-end;
		.zhuan-ye-img {
			 color: #fff;
			 text-align: center;
		    min-width: 300rpx;
		    padding: 20rpx 0rpx;
		    box-sizing: border-box;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
		    align-items: center;
		    background: #000;
			font-size:32rpx;
			.spe{
				font-style: italic;
				font-size:24rpx;
			}
		}
	}
.info-box-out-wrapper{
	padding:200rpx 40rpx 0 60rpx;
	box-sizing: border-box;
	.join-us-yk{
		.img{
			width:200rpx;
			height:100rpx;
		} 
	}
 }
.info-box{
	padding:100rpx 0rpx 0 0rpx;
	box-sizing: border-box;
	display:flex;
	align-items:center;
	position:relative;
	.img{
		width:376rpx;
		height:auto;
	}
	.desc-text-box{
		position:absolute;
		top:30rpx;
		right:0rpx;
		width:65%;
		.bold-text{
			margin-bottom:20rpx;
			font-size: 26rpx;
			font-weight:bold;
		}
		.en-text{
			font-size: 18rpx;
		}
	}
}
.avatar-wrapper{
	width:182rpx;
	height:182rpx;
	padding:0;
	margin-left:10rpx;
	&::after{
		border:0;
		border-radius:0;
	}
	.avatar{
		width:100%;
		height:100%;
		border:0;
	}
}
.nick-name-box{
	position:absolute;
	bottom:80rpx;
	right:0rpx;
	max-width: 42%;
	.edit-pen{
		margin-top:8rpx;
	}
	.sure-btn{
		// color:#ffd859;
		color:transparent;
	}
}
.content {
    .user-info-box {
        .area-desc {
            padding: 60rpx 20rpx;
            background: #d6d6d6;
        }
        .down-box {
            display: flex;
            .left-box {
                flex: 0 0 478rpx;
                width: 478rpx;
                height: 338rpx;
                background: #f2f2f2;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                padding: 42rpx 10rpx 42rpx 30rpx;
                box-sizing: border-box;
                .title {
                    font-size: 48rpx;
                    letter-spacing: 6rpx;
                }
                .e-title {
                    font-size: 40rpx;
                }
            }
            .right-box {
                flex: auto;
                color: #fff;
                .up-area {
                    width: 100%;
                    height: 169rpx;
                    background: #000;
                    display: flex;
                    justify-content: space-between;
                    padding: 20rpx 24rpx 18rpx 30rpx;
                    box-sizing: border-box;
                    .left-name {
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-end;
                        font-size: 32rpx;
                        letter-spacing: 6rpx;
                        .e-min {
                            font-size: 26rpx;
                            margin-top: 6rpx;
                            letter-spacing: 0rpx;
                        }
                    }
                    .dot-box {
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-end;
                        padding-bottom: 10rpx;
                        .img {
                            width: 30rpx;
                            height: 50rpx;
                        }
                    }
                }
                .down-area {
                    width: 100%;
                    height: 169rpx;
                    background: #323232;
                    padding: 20rpx 24rpx 18rpx 30rpx;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    .spe {
                        color: #e3b86a;
                        margin-top: 12rpx;
                    }
                }
            }
        }
        .up-box {
            display: flex;
            .user-header-box {
                .img {
                    width: 478rpx;
                }
            }
            .info {
                background: #d6d6d6;
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                padding: 42rpx 10rpx 42rpx 30rpx;
                box-sizing: border-box;
                word-break: break-all;
                .line {
                    width: 60rpx;
                    height: 8rpx;
                    border-radius: 23rpx;
                    background: #000;
                    margin-bottom: 38rpx;
                }
                .name {
                    margin-bottom: 10rpx;
                    font-size: 48rpx;
                    letter-spacing: 6rpx;
                }
                .e-name {
                    font-size: 40rpx;
                }
            }
        }
        .down-box {
        }
    }
}
.invite-box {
    position: relative;
    width: 100%;
    background: #f2f2f2;
    .text-box {
        padding: 40rpx 40rpx 40rpx 120rpx;
        .text {
            font-size: 32rpx;
            color: #000;
            opacity: 0.8;
            letter-spacing: 2rpx;
            .text-p {
                text-indent: 160rpx;
            }
        }
    }
    .invite-top-area {
        position: relative;
        .invite-title-box {
            position: absolute;
            right: 0;
            bottom: -2rpx;
            width: 100%;
            padding-left: 80rpx;
            background: transparent;
            box-sizing: border-box;
            .invite-title {
                padding: 40rpx 40rpx 20rpx;
                text-align: left;
                background: #f2f2f2;
                .title-one {
                    font-size: 32rpx;
                    opacity: 0.8;
                    margin-bottom: 10rpx;
                    .spe {
                        display: inline-block;
                        width: 10rpx;
                        height: 10rpx;
                        // font-weight: 200;
                        border-radius: 50%;
                        vertical-align: middle;
                        background: #000;
                        margin: 0 6rpx;
                    }
                }
                .title-two {
                    font-size: 60rpx;
                    font-weight: 400;
                    letter-spacing: 26rpx;
                }
            }
        }
    }
    .img {
        width: 100%;
    }
    .join-us {
        // position: absolute;
        // bottom: 0;
        // right: 0;
        display: flex;
        justify-content: flex-end;
        .join-btn {
            width: 248rpx;
            height: 92rpx;
        }
    }
}
</style>
